{% extends "base.html" %}
{% block title %}Chart View{% endblock %}
{% block styles %}
    {{ super() }}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/css/bootstrap-select.min.css">
    <link href="/static/css/bootstrap-treeview.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/jquery-ui.min.css">
    <link rel="stylesheet" href="/static/css/lobipanel.min.css">
    <style>
        .bootstrap-select .dropdown-toggle {
            width: 85%;
        }

        .loading {
            text-align: center;
            width: 80px;
            height: 40px;
            margin: 0 auto;
        }

        .loading span {
            margin: 0 auto;
            display: inline-block;
            width: 8px;
            height: 100%;
            border-radius: 4px;
            background: lightgreen;
            -webkit-animation: load 1s ease infinite;
        }

        @-webkit-keyframes load {
            0%, 100% {
                height: 40px;
                background: lightgreen;
            }
            50% {
                height: 70px;
                margin: -15px 0;
                background: lightblue;
            }
        }

        .loading span:nth-child(2) {
            -webkit-animation-delay: 0.2s;
        }

        .loading span:nth-child(3) {
            -webkit-animation-delay: 0.4s;
        }

        .loading span:nth-child(4) {
            -webkit-animation-delay: 0.6s;
        }

        .loading span:nth-child(5) {
            -webkit-animation-delay: 0.8s;
        }
    </style>
{% endblock %}
{% block page_content %}
    <div class="loading" id="loadingDiv">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <div class="alert" role="alert" id="msgAlert">

    </div>
    <div class="well row">
        <div class="col-md-3">
            <div class="row">
                <h4>Chart List</h4>
                <div id="tree" style="margin-top: 20px;max-height: 600px;overflow-y :scroll"></div>
            </div>
        </div>
        <div class="col-md-7">
            <h4>ChartView</h4>
            <div class="panel panel-default" style="margin-top:65px;">
                <div class="panel-heading">
                </div>
                <div class="panel-body" id="chartCanvas">

                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="row">
                <h4>Setting</h4>
                <form id="chartForm">
                    <div class="form-group">
                        <label for="chartTitle">Title</label>
                        <input type="text" class="form-control" id="chartTitle" name="chartTitle" placeholder="Title">
                    </div>
                    <div class="form-group" style="width:100px;">
                        <label for="chartType">ChartType</label>
                        <select class="selectpicker" name="chartType" id="chartType">
                            <option value="Bar">Bar(条形图)</option>
                            <option value="Line">Line(折线图)</option>
                            <option value="Pie">Pie(饼图)</option>
                            <option value="Gauge">Gauge(仪表盘)</option>
                            <option value="Geo">Geo(地理坐标系)</option>
                            <option value="Map">Map(地图)</option>
                            <option value="Funnel">Funnel(漏斗图)</option>
                            <option value="Scatter">Scatter(散点图)</option>
                            <option value="EffectScatter">EffectScatter(动态散点图)</option>
                            <option value="WordCloud">WordCloud(词云图)</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="chartSubTitle">Xaxis Name</label>
                        <input type="text" class="form-control" id="xaxisName" name="xaxisName"
                               placeholder="Xaxis Name">
                    </div>
                    <div class="form-group">
                        <label for="chartType">Xaxis/Attr</label>
                        <select class="selectpicker" name="xaxis" id="xaxis" data-live-search="true">
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="chartSubTitle">Yaxis Name</label>
                        <input type="text" class="form-control" id="yaxisName" name="yaxisName"
                               placeholder="Yaxis Name">
                    </div>
                    <div class="form-group">
                        <label for="chartType">Yaxis/Value</label>
                        <select class="selectpicker" name="yaxis" id="yaxis" data-live-search="true" multiple>
                        </select>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="isDataZoom" name="isDataZoom">isDataZoom
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="isVisualMap" name="isVisualMap">isVisualMap
                        </label>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" id="isConvert" name="isConvert">isConvert
                        </label>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" id="chartDraw">Draw</button>
                        <button type="button" class="btn btn-default" id="chartDel">Del</button>
                        <button type="button" class="btn btn-default" id="chartSave">Save</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script src="/static/js/jquery-ui.min.js"></script>
    <script src="/static/js/lobipanel.min.js"></script>
    <script src="/static/js/bootstrap-treeview.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.2/js/bootstrap-select.min.js"></script>
    <script>
        $(function () {
            $("msgAlert").hide();
            $('#loadingDiv').hide();
            $('.panel').lobiPanel({
                reload: false,
                close: false,
                editTitle: false
            });
            var chart;
            $('.lobipanel').on('onSmallSize.lobiPanel', function (ev, lobiPanel) {
                chart.resize();
            });
            $('.lobipanel').on('onFullScreen.lobiPanel', function (ev, lobiPanel) {
                chart.resize();
            });
            $('.lobipanel').on('onResize.lobiPanel', function (ev, lobiPanel) {
                chart.resize();
            });
            var sql = '';
            var is_wrangling = 'false';
            var id = 0;
            $("#chartDraw").click(function () {
                $("#loadingDiv").modal('show');
                $.ajax({
                    type: "post",
                    url: '/query/chart?sql=' + sql + '&is_wrangling=' + is_wrangling + '&id=' + id,
                    data: $("#chartForm").serialize(),
                    success: function (data) {
                        $('#chartCanvas').empty();
                        var canvas = "<div id='echartcanvas'  style='margin-top:20px;width:100%;background-color: white;min-height: 600px;'></div>";
                        $('#chartCanvas').html(canvas);
                        chart = echarts.init($('#echartcanvas')[0], null, {renderer: 'canvas'});
                        //data.custom_function
                        var chart_options = $.parseJSON(data.options);
                        chart.setOption(chart_options);
                        //chart.on("{{ event_name }}", {{ handler_name }});
                        $("#loadingDiv").modal('hide');
                    }
                });
            });

            $("#chartSave").click(function () {
                $.ajax({
                    type: "post",
                    url: '/query/chart/' + id,
                    data: $("#chartForm").serialize(),
                    success: function (data) {
                        $("#msgAlert").removeClass('alert-danger').addClass('alert-success');
                        var innerHTML = "<strong>Save Success!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        $("#msgAlert").removeClass('alert-success').addClass('alert-danger');
                        var innerHTML = "<strong>Save Failed!</strong>";
                        $("#msgAlert")[0].innerHTML = innerHTML;
                        $("#msgAlert").fadeTo(2000, 500).slideUp(500, function () {
                            $("#msgAlert").hide();
                        });
                    }
                });
            });

            $("#chartDel").click(function () {
                arr = $('#tree').treeview('getSelected');
                if (arr.length == 0) {
                    alert("请先选中chart view！");
                    return;
                }
                var ids = "";
                for (var i = 0; i < arr.length; i++) {
                    if (i == 0) {
                        ids = arr[i].id;
                    } else {
                        ids = ids + "," + arr[i].id;
                    }
                }
                if (confirm("确定删除吗？一旦删除将无法恢复！")) {
                    $.ajax({
                        type: "delete",
                        url: "/query/chart",
                        data: {ids: ids},
                        success: function (data) {
                            $('#tree').treeview('removeNode', [arr, {silent: true}]);
                        }
                    });
                }
            });

            var data = {{ tree_nodes|tojson }};
            $('#tree').treeview({
                data: data,
                levels: 1,
                showTags: true,
                onNodeSelected: function (event, data) {
                    $.ajax({
                        type: "get",
                        url: '/query/chart/' + data.id,
                        success: function (data) {
                            var options = [];
                            $.each(data.xy_axis, function (index, obj) {
                                var option = "<option value='" + obj + "'>" + obj + "</option>";
                                options.push(option);
                            });
                            $('#xaxis').html(options);
                            $('#yaxis').html(options);
                            $('#xaxis').selectpicker('refresh');
                            $('#yaxis').selectpicker('refresh');
                            $('#xaxis').selectpicker('render');
                            $('#yaxis').selectpicker('render');
                            sql = data.chart_info.select_sql;
                            if (data.chart_info.is_wrangling) {
                                is_wrangling = "true";
                            }
                            id = data.chart_info.id;
                            $('#chartTitle').val(data.chart_info.title);
                            $('#chartSubTitle').val(data.chart_info.sub_title);
                            $('#chartType').val(data.chart_info.chart_type);
                            $('#xaxisName').val(data.chart_info.x_axis_name);
                            $('#xaxis').val(data.chart_info.xaxis);
                            $('#yaxisName').val(data.chart_info.y_axis_name);
                            $('#yaxis').val(data.chart_info.yaxis.split(','));

                            $('#xaxis').selectpicker('refresh');
                            $('#yaxis').selectpicker('refresh');
                            if (data.chart_info.is_data_zoom) {
                                $('#isDataZoom').prop('checked', true);
                            }
                            if (data.chart_info.is_visualmap) {
                                $('#isVisualMap').prop('checked', true);
                            }
                            if (data.chart_info.is_convert) {
                                $('#isConvert').prop('checked', true);
                            }

                            $('#chartDraw').click();
                        }
                    });
                }
            });
        })


    </script>
    <script src="https://pyecharts.github.io/assets/js/echarts.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/china.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-liquidfill.min.js"></script>
    <script src="https://pyecharts.github.io/assets/js/echarts-wordcloud.min.js"></script>
{% endblock %}
